<template>
  <ContainerContent
    header-class="border-b-1px border-b-dashed border-color-#DFE2E5 pb-6"
    :refresh="false"
    :pagination="false"
    inner>
    <template #header>
      <div class="deploy-title">
        规则名称 <span class="sub-title">{{ title }}</span>
      </div>
    </template>
    <t-transfer
      v-model="targetValue"
      v-model:checked="checkedIds"
      :data="data"
      :keys="keys"
      :search="searchOption"
      @checked-change="handleCheckedChange">
      <template #title="props">
        <div
          v-if="props.type !== 'target'"
          class="text-sm/22px text-[#1562FC] cursor-pointer flex items-center gap-x-1 leading-10 h-full"
          @click="router.push({ name: 'NodeList' })">
          <div>管理节点</div>
          <i-icons-new-page class="!w-4" />
        </div>
      </template>
      <template #tree="slotProps">
        <t-tree v-bind="slotProps" checkable hover expand-all transition />
      </template>
    </t-transfer>
    <a-button type="primary" class="mt-6" @click="handleSubmit"
      >保存配置</a-button
    >
  </ContainerContent>
</template>
<script lang="ts" setup>
import type { WafBindNodeIds } from '@/apis/model/waf'
import { getApiNodeTreeWithRegionApi } from '@/apis/modules/node'
import {
  getApiWafBindNodeIdsApi,
  updateApiWafBindApi
} from '@/apis/modules/waf'
import ContainerContent from '@/components/ContentContainer.vue'
import Search from '~icons/icons/search'
const route = useRoute()
const router = useRouter()
const id = ref(route.params.id)
const title = ref(route.params.name || '')
const searchOption = ref({
  prefixIcon() {
    return h(Search, { class: 'text-#BFC2C7' })
  }
})

const keys = { value: 'id', label: 'name', children: 'children' }
const targetValue = ref([])
const checkedIds = ref([])
const data = ref([])
const { run } = useListRequest(getApiNodeTreeWithRegionApi, {
  immediate: true,
  afterFn(res) {
    const list = filterTree(res.list)
    data.value = transformToTree(list)
  }
})
useRequest(getApiWafBindNodeIdsApi, {
  auto: true,
  params: { id: id.value },
  success(res: WafBindNodeIds) {
    targetValue.value = res.node_ids || []
  }
})
const handleCheckedChange = ({ checked }: any) => {
  checkedIds.value = checked
}

const handleSubmit = async () => {
  await updateApiWafBindApi({
    id: id.value as string,
    node_ids: targetValue.value
  })
  ToastUtils.success('保存成功')
  run()
}

let timer: any = null
onMounted(() => {
  timer = setTimeout(() => {
    const inputArr = document.querySelectorAll('.t-input__inner')
    inputArr.forEach((item) => {
      //@ts-ignore
      item.placeholder = '请输入节点名称/节点IP'
    })
    const sourceHeaderCustom = document
      .querySelector('.t-transfer__list-source')
      ?.querySelector('.t-transfer__list-header > div > span')
    sourceHeaderCustom!.textContent = '部署节点'
    sourceHeaderCustom!.className = 'font-mediums'
    const targetHeaderCustom = document
      .querySelector('.t-transfer__list-target')
      ?.querySelector('.t-transfer__list-header > div > span')
    targetHeaderCustom!.textContent = '已部署的节点'
    targetHeaderCustom!.className = 'font-mediums'
  })
})
onUnmounted(() => {
  clearTimeout(timer)
  timer = null
})
</script>

<style lang="less" scoped>
.deploy-title {
  @apply text-sm/22px text-4;
  .sub-title {
    @apply text-2 ml-4;
  }
}
</style>
